<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            var uploadFiles = [];

            $('#uploadForm').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                var fileInput = document.getElementById('fileInput');
                var filePath = fileInput.value;
                if (!filePath) { // 如果值为空
                    alert('请选择文件');
                    return false;
                }
                if (uploadFiles.indexOf(filePath) !== -1) {
                    alert('请勿重复文件上传');
                    return false;
                }
                uploadFiles.push(filePath);
                $.ajax({
                    url: '/file/excleUpload',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        alert(data.data);
                    }
                });
            });
        });
        function validateFile() {
            var fileInput = document.getElementById('fileInput');
            var filePath = fileInput.value;
            var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
            if (ext != 'xls' && ext != 'xlsx') {
                alert('只能上传Excel文件');
                return false;
            }
            return true;
        };

    </script>
</head>
<body>
<a th:href="@{/file/downTemplate}">模板下载</a> <br/>

<form id="uploadForm" enctype="multipart/form-data" onsubmit="return validateFile()">
    <input type="file" id="fileInput" name="file">
    <input type="submit" value="上传">
</form>
<a th:href="@{/index}">返回</a>

</body>
</html>